<template>
	<view class="register">

		<view class="content">
			<!-- 头部logo -->
			<view class="header">
				<image :src="logoImage"></image>
			</view>
			<!-- 主体 -->
			<view class="main">
				<tInput v-model="username" type="text" placeholder="用户名"></tInput>
				<tInput v-model="password" type="password" placeholder="密码" isShowPass></tInput>
				<tInput v-model="email" type="text" placeholder="邮箱"></tInput>
				<tInput v-model="code" type="number" placeholder="验证码" isShowCode ref="runCode" @setCode="captcha()">
				</tInput>

			</view>

			<tButton class="wbutton" text="注 册" :rotate="isRotate" @click.native="startReg()"></tButton>

			<!-- 底部信息 -->
			<view class="footer">
				<text @tap="isShowAgree" class="cuIcon" :class="showAgree?'cuIcon-radiobox':'cuIcon-round'"> 同意</text>
				<!-- 协议地址 -->
				<navigator url="" open-type="navigate">《协议》</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	let flag;
	let _this;
	import tInput from '@/components/tally-login/tally-input.vue'
	import tButton from '@/components/tally-login/tally-button.vue'
	export default {
		components: {
			tInput,
			tButton,
		},
		data() {
			return {
				// logo图片
				logoImage: require("@/static/logo.png"),
				username: '', 	 // 用户名
				password: '', 	 // 密码
				email: '', 	 	 // 邮箱
				code: "", 		 // 验证码
				showAgree: true, // 协议是否选择
				isRotate: false, // 是否加载旋转
			}
		},
		mounted() {
			flag = 0;
			_this = this;
		},
		methods: {
			isShowAgree() {
				// 是否选择协议
				_this.showAgree = !_this.showAgree;
			},
			// 获取验证码
			captcha() {
				if (this.email.length <= 0) {
					this.$u.toast("请输入邮箱！");
					return false;
				}
				this.$api({
					method: 'put',
					url: '/captcha/' + this.email + '/' + flag
				}).then(res => {
					if (res.code == 0) {
						// 触发倒计时
						this.$refs.runCode.$emit('runCode'); 
						// 产生60秒定时器 终止倒计时
						setTimeout(function() {
							_this.$refs.runCode.$emit('runCode',0); 
						}, 60 * 1000)
					} else {
						this.$u.toast(res.msg);
					}
				}).catch(err => {
					console.log(err)
					this.$u.toast("网络连接失败");
				});
			},
			startReg() {
				//注册
				if (this.isRotate) {
					//判断是否加载中，避免重复点击请求
					return false;
				}
				if (this.showAgree == false) {
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: '请先同意《协议》'
					});
					return false;
				}
				// 加载旋转
				_this.isRotate = true
				// 封装请求信息
				let data = {
					loginName: this.username, 	
					password: this.password, 	 
					email: this.email, 	 	
					code: this.code, 	
				}
				this.$api({
					method: 'post',
					url: '/system/user/register',
					data: data
				}).then(res => {
					if (res.code == 0) {
						this.$u.toast(res.msg);
						// 终止旋转
						_this.isRotate = false
						// 进入登陆页
						uni.navigateTo({
							url: `/pages/login/login?username=${this.username}&password=${this.password}`,
							fail(err) {
								console.log(err)
							}
						});
					} else {
						// 终止旋转
						_this.isRotate = false
						this.$u.toast(res.msg);
					}
				}).catch(err => {
					// 终止旋转
					console.log(err)
					_this.isRotate = false
					this.$u.toast("网络连接失败");
				});
			}
		}
	}
</script>

<style>
	@import url("@/components/tally-login/css/icon.css");
	@import url("./css/main.css");
</style>